<template>
    <div class="homepage">
        <home-header class="homepage-header"></home-header>
        <div class="homepage-main">
            <home-navbar class="homepage-main-navbar"></home-navbar>
            <home-content class="homepage-main-content"></home-content>
        </div>
        
    </div>
</template>
<script>
import header from '@/components/header'
import navbar from '@/components/navbar'
import content from '@/components/content'
export default {
    name: 'home',
    components:{
        'home-header':header,
        'home-navbar':navbar,
        'home-content':content
    },
    data(){
        return{
                
        }
    },
    methods:{

    }
}
</script>

<style scoped>

.homepage{
    /*开启相对定位，目的是让里面的子元素可以调整位置布局*/
    position: absolute;
    /**
    注意！！！：
    只有fixed和absolute 可以配合left/right/top/bottom 来撑开空间，relative是不行的！！！
     */

    /*撑开整个空间 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    /*设置最小宽度，与里面的子容器宽度一致，这样可以避免浏览器横向压缩后拖动滚动条，出现该元素宽度和里面的子元素宽度不一致问题。 */
    min-width: 1000px;
}

.homepage-header{
    position: relative;
    top: 0;
    height: 50px;
    width: 100%;
}

.homepage-main{

    position: absolute;
    top: 50px; /*给头部留出空间避免重叠 */
    bottom: 0;
    left: 0;
    right: 0;
    width: 1000px;
    /* height: 100%; */
    
    margin: 0 auto; 
    /*水平居中 */
    /* 
    也可以这样水平居中
    position: relative;
    margin: 0 auto; 
    */
}

.homepage-main-navbar{ /* 导航区域划分出空间和位置 */
    position: absolute;
    margin-top: 5px; /*留出空隙，目的是美观 */
    margin-bottom: 5px;
    left: 0;
    bottom: 0;
    top: 0;
    width: 160px;
    /* background-color: darkcyan; */
}

.homepage-main-content{ /* 内容区域划分出空间和位置 */
    position: absolute;
    margin-top: 5px;
    margin-bottom: 5px;
    left: 170px;
    right: 0;
    bottom: 0;
    top: 0;
    /* background-color: deepskyblue; */
}
</style>